<template>
  <div>
    <div class="ShowTableContent">
      <el-dialog
        v-model="classesShowInfoState"
        title="班级学生"
        width="1000"
        align-center
      >
        <el-dialog
          v-model="studentSocreInsertState"
          title="班级学生"
          width="300"
          align-center
        >
          <el-text class="mx-1" type="primary">课程名字</el-text>
          <el-input
            v-model="studentScoreSubjectName"
            style="width: 240px"
            disabled
          />
          <br />
          <el-text class="mx-1" type="primary">学生名字</el-text>
          <el-input
            v-model="studentScoreStudentName"
            style="width: 240px"
            disabled
          />
          <br />
          <el-text class="mx-1" type="primary">学生分数</el-text>
          <el-input v-model="studentScoreStudentSocre" style="width: 240px" />
          <br />
          <el-button
            link
            type="primary"
            size="small"
            @click.prevent="sendinsertStudentSocre"
          >
            录入
          </el-button>
          <br>
        </el-dialog>
        <el-table
          :data="classesStudentInfoList"
          style="width: 100%"
          max-height="650"
        >
          <el-table-column prop="subjectName" label="课程名字" width="120" />
          <el-table-column prop="classesName" label="班级名字" width="150" />
          <el-table-column prop="studentName" label="学生名字" width="120" />
          <el-table-column prop="studentAccount" label="学生账号" width="120" />
          <el-table-column prop="studentXueHao" label="学生学号" width="120" />
          <el-table-column prop="score" label="学生分数" width="120" />
          <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
              <el-button
                link
                type="primary"
                size="small"
                @click.prevent="insertStudentSocre(scope.$index)"
              >
                成绩录入
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="PageStyle">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="countsTwo"
            :page-size="pageSizeTwo"
            :current-page="pageNowTwo"
            @current-change="pageChangeTwo"
            class="PageC"
          />
        </div>
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="classesShowInfoState = false"
        >
          关闭
        </el-button>
      </el-dialog>
      <el-table
        :data="queryClassesTeacherInfoList"
        style="width: 100%"
        max-height="650"
      >
        <el-table-column prop="teacherName" label="教师名字" width="120" />
        <el-table-column prop="subjectId" label="课程id" width="150" />
        <el-table-column prop="subjectName" label="课程名字" width="120" />
        <el-table-column prop="classesId" label="班级id" width="120" />
        <el-table-column prop="classesName" label="班级名字" width="120" />
        <el-table-column fixed="right" label="Operations" width="120">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click.prevent="showClassesStudentInfo(scope.$index)"
            >
              点击查看班级
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="PageStyle">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="counts"
        :page-size="pageSize"
        :current-page="pageNow"
        @current-change="pageChange"
        class="PageC"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { teacherStateStore } from "../store/TeacherInfo.js";
import requests from "../axios/axios.js";
import { ElMessage } from "element-plus";
import { onMounted } from "vue";

//定义翻页所需要的数据
let counts = 0;
let pageSize = 10;
let pageNow = 1;

//定义翻页所需要的数据
let countsTwo = 0;
let pageSizeTwo = 10;
let pageNowTwo = 1;
//store数据
let teacherStateStoreInfo = teacherStateStore();
//根据这个查询数据

//班级成员数据
let queryClassesTeacherInfoList = ref([]);

let classesShowInfoState = ref(false);

//班级学生信息集合
let classesStudentInfoList = ref([]);

//班级id
let classesIdInfo = ref("");
let subjectIdInfo = ref("");

//定义信息
let studentSocreInsertState = ref(false);
let studentScoreSubjectName = ref("");
let studentScoreStudentName = ref("");
let studentScoreStudentSocre = ref("");

let studentScoreSubjectId = ref("");
let studentScoreStudentId = ref("");

//定义翻页所需要的的信息
function pageChange(index) {
  //传入的数据是当前的索引
  pageNow = index;
  //调用查询共嗯
  querInfo();
}
function pageChangeTwo(index) {
  //传入的数据是当前的索引
  pageNowTwo = index;
  //调用查询共嗯
  queryClassesStudentInfoList();
}

//定义查询功能

async function querInfo() {
  let { data } = await requests.post("/teacher/base/query/teacher/subject", {
    page: pageNow,
    pageSize: pageSize,
    //班级id
    teacherId: teacherStateStoreInfo.getterTeacherId,
  });
  if (data.code == 200) {
    ElMessage({
      message: "查询成功",
      type: "success",
    });
    queryClassesTeacherInfoList.value = data.data;
    //数据绑定到模板上
    console.log("查询到的数据为" + data.data);
    //翻页数据设置
    counts = data.countTotal;
    pageSize = data.pageSize;
    pageNow = data.page;
  } else {
    ElMessage({
      message: "查询失败",
      type: "error",
    });
  }
}
//班级id
function showClassesStudentInfo(index) {
  classesShowInfoState.value = true;

  //根据索引向后端发送信息
  let info = queryClassesTeacherInfoList.value[index];
  //从集合中取值
  classesIdInfo.value = info.classesId;
  subjectIdInfo.value = info.subjectId;
  //像后端发送信息
  queryClassesStudentInfoList();
  //查询班级内的所有的学生
  //并且展示出来
}

async function queryClassesStudentInfoList() {
  //发送axios请求
  let { data } = await requests.post(
    "/teacher/base/query/teacher/student/score",
    {
      page: pageNowTwo,
      pageSize: pageSizeTwo,
      classesId: classesIdInfo.value,
      subjectId: subjectIdInfo.value,
    }
  );

  if (data.code == 200) {
    ElMessage({
      message: "查询成功",
      type: "success",
    });
    classesStudentInfoList.value = data.data;
    //页数设置
    //翻页数据设置
    countsTwo = data.countTotal;
    pageSizeTwo = data.pageSize;
    pageNowTwo = data.page;
  } else {
    ElMessage({
      message: "查询失败",
      type: "error",
    });
  }
}
//定义函数
function insertStudentSocre(index) {
  studentSocreInsertState.value = true;
  //数据绑定
  //索引取值
  let info = classesStudentInfoList.value[index];
  //框框数据绑定
  studentScoreSubjectName.value = info.subjectName;
  studentScoreStudentName.value = info.studentName;
  studentScoreSubjectId.value = info.subjectId;
  studentScoreStudentId.value = info.studentId;
}
//像后端发送插入数据
//定义发送数据
async function sendinsertStudentSocre() {
  let { data } = await requests.post("/teacher/base/update/student/score", {
    studentId: studentScoreStudentId.value,
    subjectId: studentScoreSubjectId.value,
    score: studentScoreStudentSocre.value,
  });

  if (data.code == 200) {
    ElMessage({
      message: "录入成功",
      type: "success",
    });
    queryClassesStudentInfoList()
  } else {
    ElMessage({
      message: "录入失败",
      type: "error",
    });
  }
}

//初始化
onMounted(() => {
  querInfo();
});
</script>

<style>
.ShowTableContent {
  width: 100%;
  height: 646px;
}
.PageStyle {
  display: flex;
  align-items: center;
}
</style>